<template>
  <div class="advisory">
      <!-- <div class="advisory1">
         <el-carousel height="359px" indicator-position='none'>
                  <el-carousel-item v-for="(item,index) in newslist4" :key="index">
                      <nuxt-link target="_blank" :to="'/post/' + item.pid">
                    <div class="newsdetailtitle">
                      <img :src="item.thumbnail" alt="">
                      <div class="info">
                        <span>{{item.name}}</span>
                       </div>
                    </div>
                      </nuxt-link>
                  </el-carousel-item>
          </el-carousel>
      </div> -->
       <div class="addbanner">
        <img src="http://img3.tqcaifu.com/titleadd/titleguanggao2.png" alt="">
      </div>
      <div>
        <el-row :gutter="10" class="checktitle">
          <el-col :span="16">
              <div class="checkbox1">
                <el-radio-group v-model="radio" @change="changeradio">
                  <el-radio-button label="投资"></el-radio-button>
                  <el-radio-button label="宏观"></el-radio-button>
                  <el-radio-button label="股权"></el-radio-button>
                  <el-radio-button label="信托"></el-radio-button>
                  <el-radio-button label="基金"></el-radio-button>
                  <el-radio-button label="资管"></el-radio-button>
                  <el-radio-button label="政策"></el-radio-button>
                  <el-radio-button label="财经"></el-radio-button>
                  <el-radio-button label="市场"></el-radio-button>
                  <el-radio-button label="金融"></el-radio-button>
                  <el-radio-button label="经济"></el-radio-button>
                  
                </el-radio-group>
              </div>
              <div class="researchleft">
                  <newslist1 title="" :newslist="firstNews"></newslist1>                  
              </div>
              <div class="fenye">
                  <el-pagination
                    @current-change="handleCurrentChange"
                    :page-size="7"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
              </div>  
          </el-col> 
           <el-col :span="8">
              <div>
                  <contactus2></contactus2>
                  <!-- <newslist2></newslist2> -->
                  <!-- <post1 :productlist="productlist"></post1> -->
              </div>
          </el-col>
       </el-row>
      </div>
 
  </div>
</template>

<script>
import api from '../../../static/js/api.js'
import asyncApi from '../../../static/js/asyncApi.js'
import contactus2 from "../../../components/contactus2";
import newslist1 from "../../../components/newslist1";
import newslist2 from "../../../components/newslist2";
import post1 from "../../../components/post1";
export default {
  components:{
        contactus2,
        newslist1,
        newslist2,
        post1
    },
  data() {
    return{
      radio:""
    }
  },
  methods: {
    handleCurrentChange(val){
      api.getTagPost({tagName:this.radio,page:val,pageSize:"7",orderBy:"createtime",orderByType:"desc"}).then((res)=>{
        this.firstNews = res.data.list
      })
    },
    changeradio(val){
      //  api.getTagPost({tagName:val,page:"1",pageSize:"7",orderBy:"createtime",orderByType:"desc"}).then((res)=>{
      //   this.firstNews = res.data.list,
      //   this.total =  res.data.total
      // })
      switch (val) {
          case "投资":
              window.location.href = "http://www.tqcaifu.com/newslist/touzi"
            break;
          case "宏观":
             window.location.href = "http://www.tqcaifu.com/newslist/hongguan"
            break;
          case "股权":
             window.location.href = "http://www.tqcaifu.com/newslist/guquan"
            break;
          case "信托":
             window.location.href = "http://www.tqcaifu.com/newslist/xintuo"
            break;
          case "基金":
           window.location.href = "http://www.tqcaifu.com/newslist/jijin"
            break;
          case "资管":
            window.location.href = "http://www.tqcaifu.com/newslist/ziguan"
            break;
          case "政策":
            window.location.href = "http://www.tqcaifu.com/newslist/zhengce"
            break;
          case "财经":
            window.location.href = "http://www.tqcaifu.com/newslist/caijing"
            break;
          case "市场":
            window.location.href = "http://www.tqcaifu.com/newslist/shichang"
            break;
          case "金融":
            window.location.href = "http://www.tqcaifu.com/newslist/jinrong"
            break;
          case "经济":
            window.location.href = "http://www.tqcaifu.com/newslist/jingji"
            break;
          default:
           window.location.href = "http://www.tqcaifu.com/newslist/caijing"
        }
    } 
  },
  mounted:function(){
   var id = this.$route.params.id
    switch (id) {
      case "touzi":
        this.radio = "投资";
        break;
      case "hongguan":
        this.radio = "宏观";
        break;
      case "guquan":
        this.radio = "股权";
        break;
      case "xintuo":
        this.radio= "信托";
        break;
      case "jijin":
        this.radio = "基金";
        break;
      case "ziguan":
        this.radio = "资管";
        break;
      case "zhengce":
        this.radio = "政策";
        break;
      case "caijing":
        this.radio = "财经";
        break;
      case "shichang":
        this.radio = "市场";
        break;
      case "jinrong":
        this.radio = "金融";
        break;
      case "jingji":
        this.radio = "经济";
        break;
      default:
        this.radio = "股权";
    }
  },
  async asyncData (context) {
    var id = context.params.id;   
      switch (id) {
      case "touzi":
        id = "投资";
        break;
      case "hongguan":
        id = "宏观";
        break;
      case "guquan":
        id = "股权";
        break;
      case "xintuo":
        id = "信托";
        break;
      case "jijin":
        id = "基金";
        break;
      case "ziguan":
        id = "资管";
        break;
      case "zhengce":
        id = "政策";
        break;
       case "caijing":
        id = "财经";
        break;
       case "shichang":
        id = "市场";
        break;
      case "jinrong":
        id = "金融";
        break;
      case "jingji":
        id = "经济";
        break;
      default:
        id = "股权";
    } 
    let [data1,data2,data6,data7] = await Promise.all([
       asyncApi.asyncgetTagPost({tagName:id,page:"1",pageSize:"7",orderBy:"createtime",orderByType:"desc"}),
       //asyncApi.asyncGetCategoryPost({categoryName:"财经头条",page:"1",pageSize:"6",orderBy:"createtime",orderByType:"desc"}),
       asyncApi.asyncGetCategoryPost({page:"2",pageSize:"3",orderBy:"readNum",orderByType:"desc"}),    
       asyncApi.asyncgetBannerTypePost({bannerType:"文章列表页banner",orderBy:"weigh",orderByType:"desc"}),    
       asyncApi.asyncgetProduct({page:"1",pageSize:"5"}),
    ])
    return {
      firstNews: data1.data.data.list,
      zuire: data2.data.data.list,
      newslist4:data6.data.data.list,
      total:data1.data.data.total,
      productlist:data7.data.data.list,
      
    }
 },
 head () {
    return {
      title: "财经资讯_投资资讯_财经头条_财经新闻_热点事件_热点新闻事件_今日热点新闻_热点财经新闻_政策动态-天沁财富新闻列表",
      meta: [
         { hid:"keywords",name: 'keywords', content: '投资资讯,财经资讯,理财资讯,财经新闻,财经头条,政策动态，今日热点新闻，热点新闻事件，热点财经新闻，2018最热财经新闻' },
         { hid:"description",name: 'description', content: '天沁财富财经资讯中心为金融投资者提供最新最前沿的金融市场动态，以及私募股权、信托、资管、基金、债权投资等行业深度报道和财经资讯。' }
      ]
    }
  }
};
</script>


<style>
.addbanner{
  width: 100%;
  margin-top: 10px;
}
.addbanner img{
  width: 100%;
}
.fenye{
  width: 100%;
  background: white;
  text-align: center;
  padding: 20px 0;
}
.checkbox1{
  margin-bottom: -10px;
}
.newsdetailtitle{
  height: 100%;
  width: 100%;
  position: relative;
}
.newsdetailtitle img{
  height: 100%;
  width: 100%;
}
.newsdetailtitle .info{
  position: absolute;
  bottom: 0;
  right: 0px;
  width: 100%;
  
}
.newsdetailtitle .info span{
  height: 60px;
  padding: 0 30px;
  display: inline-block;
  line-height: 60px;
  background: rgba(0,0,0, 0.5);
  background: -webkit-linear-gradient(rgba(255,255,255,.1),rgba(0,0,0,.5));  
        background: -o-linear-gradient(rgba(255,255,255,.1),rgba(0,0,0,.5));  
        background: -moz-linear-gradient(rgba(255,255,255,.1),rgba(0,0,0,.5));  
        background: -mos-linear-gradient(rgba(255,255,255,.1),rgba(0,0,0,.5));  
        background: linear-gradient(rgba(255,255,255,.1),rgba(0,0,0,.5));  

  color: white;
  font-size: 20px;
  width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.advisory{
  width: 1200px;
  margin: 0 auto;
}
.advisory1{
  margin-top: 10px;
  width: 100%;
  height: 356px;
}
.advisory1 img{
  width: 100%;
  height: 100%;
}
.checktitle{
  margin-top: 10px;
}

</style>
